import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const TodoAPP = () => {
    const [todos, setTodos] = useState([{'name': '吃饭', isOk: false}])

    return (
        <div className='todo'>
            {/* 输入框 */}
            <TodoInput addTodo={(value) => {
                setTodos([...todos, {name:value, isOk:false}])
            }}></TodoInput>
            
            {/* 列表内容 */}
            <ul className="todo-lsit">
                {todos.map((item, index) => {
                    return <TodoItem key={index} todo={item} index={index} delTodo={(index) => {
                        let newSetTodos = [...todos]
                        newSetTodos.splice(index, 1)
                        setTodos(newSetTodos) 
                    }}></TodoItem>
                })}
            </ul>
        </div>
    )
}

const TodoInput = ({addTodo}) => {
    const [inputVal, setInpputVal] = useState('')

    return (
        <div className="todo-input">
            <input type="text" placeholder='请输入' value={inputVal} onChange={
                (e) => {
                    setInpputVal(e.target.value)
                }
            }/>
            <button onClick={
                () => {
                    addTodo(inputVal)
                }
            }>Add</button>
        </div>
    )
}

const TodoItem = ({todo, delTodo, index}) => {
    return (
        <li className="todo-item">
            <span>{todo.name}</span>
            <button onClick={() => {
                delTodo(index)
            }}>&times;</button>
        </li>
    )
}

ReactDOM.render(<TodoAPP></TodoAPP>, document.getElementById('root'))